<!-- 销售类别统计 -->
<template>
  <div id="SalesCategory">
    <div id="SalesCategoryEcharts" :style="{height:height,width:width}" />
  </div>
</template>

<script>
export default {
  name: 'SalesCategory',
  data() {
    return {
      height: '306px',
      width: '100%',
      chart: null
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.initChart() // 构建统计图
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 构建统计图
    initChart() {
      this.chart = this.$echarts.init(document.getElementById('SalesCategoryEcharts'))
      const data = [
        { value: 17, name: '服装' },
        { value: 44, name: '饰品' },
        { value: 55, name: '电子设备' },
        { value: 41, name: '家居' }
      ]
      this.chart.setOption({
        color: ['#ffbe0b', '#5369f8', '#43d39e', '#f77e53'],
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross'
          },
          formatter: '{b}：{c} K'
        },
        legend: {
          top: '5%',
          left: 'right',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                textStyle: {
                  fontWeight: 500,
                  fontSize: 12, // 文字的字体大小
                  color: '#fff'
                },
                formatter: '{d}%',
                position: 'inner' // 标签的位置
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data,
            colorBy: 'data'
          }
        ]
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
